<!doctype html>
<html style="height:100%">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
    <title>酒店地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6B0lKIOMMPw5O8SG9Lwqv2Gz"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
    <link rel="stylesheet" href="<{$ipath}>minisite/hotel/css/base.css">
    <style>
        .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
        #header{position:relative;background-color:#18d5d7;min-height: 2.6rem;width: 100%;text-align: center;border-bottom:1px solid #7fe3e5;}
        #header.ulinenone{border-bottom:0;}
        #header>div:first-child{margin-left:1.5rem;position:absolute;left: 0;top: 25%;z-index: 1;width: 1.8rem;height: 1.8rem;}
        .back:before{display:block;content:"";width: 1.0rem;height: 1.0rem;transform:translate(0,-50%) rotate(45deg);-webkit-transform:translate(0,-50%) rotate(45deg);border:solid #fff;border-width:0 0 2px 2px;margin-top:50%;}
        #header .title{color: #fff;font-size: 1.0rem;font-weight: bold;line-height: 2.6rem;}
        .mappanel{position:fixed;bottom:0;right:0;width:100%;}
        .mappanel ul{width:200px;height:45px;float:right;line-height:45px;background:#fff;}
        .mappanel ul li{float:left;padding-left:15px;padding-right:15px;}
        .mappanel ul li.active{background:#0075c7;color:#fff;}
        .mappanel .map-result{position:absolute;width:100%;height:200px;overflow:auto;left:0;top:-200px;background:rgba(255,255,255,0.7);border:1px #18d5d7 solid;}
        .mappanel .close{position:absolute;z-index:1;right:0;top:-215px;width:25px;height:25px;text-align:center;line-height:20px;border-radius:12px;background:#e5ecf9}
    </style>
</head>
<body style="height:100%">
<header id="header" class="ulinenone">
    <div class="back" onclick="history.go(-1);"></div>
    <div class="title">酒店地图</div>
</header>
<div id="allmap" style="width:100%;height:100%">
</div>
<div class="mappanel">
    <div class="close">x</div>
    <div class="map-result" id="map-result">
    </div>
    <ul class="clearfix">
        <li class="active" t="walking">步行</li>
        <li t="driving">驾车</li>
        <li t="transit">公交</li>
    </ul>
</div>
<script src="<{$ipath}>minisite/hotel/js/jquery.min.js"></script>
<script type="text/javascript">


    var map = new BMap.Map("allmap");
    var point = new BMap.Point(<{$hinfo.longitude}>,<{$hinfo.latitude}>);
    map.centerAndZoom(point, 12);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);
    var mypoint = null;
    var endpoint = new BMap.Point(<{$hinfo.longitude}>,<{$hinfo.latitude}>);


    $(function(){
        $(".mappanel .close").click(function(){
            $(".mappanel .map-result").hide();
            $(".mappanel .close").hide();
        });
        $(".mappanel ul li").click(function(){
            $(".mappanel .map-result").show();
            $(".mappanel .close").show();
            if(mypoint==null||!mypoint) return;
            $(".mappanel ul li").removeClass("active");
            $(this).addClass("active");
            map.clearOverlays();
            switch($(this).attr("t")){
                case "walking":
                    walkingFun();
                    break;
                case "driving":
                    drivingFun();
                    break;
                case "transit":
                    transitFun();
                    break;
            }
        });

        function walkingFun(){
            var walking=new BMap.WalkingRoute(map,{renderOptions:{map:map,autoViewport:true,panel:"map-result"}});
            walking.search(endpoint,mypoint);
        }
        function drivingFun(){
            var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport:true,panel:"map-result"}});
            driving.search(endpoint,mypoint);
        }
        function transitFun()
        {
            var transit=new BMap.TransitRoute(map, {renderOptions:{map:map,autoViewport:true,panel:"map-result"}});
            transit.search(endpoint,mypoint);
        }
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                //map.addOverlay(mk);
                //map.panTo(r.point);
                //alert('您的位置：'+r.point.lng+','+r.point.lat);
                mypoint=r.point;
            }
            else {
                alert('获取你的位置失败请稍后重试');
            }
            $(".mappanel ul li:first").click();
        },{enableHighAccuracy: true});
    });
    window.onload = function() {
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == "micromessenger"){
            document.getElementById("header").style.display="none";
        }
    };
</script>
</body>
</html>
